{extend name="tpl/site_0/default/pc/public/layout.html" /}
{block name="title"}{$webConfig.WEBNAME}{/block}
{block name="head"}
<style>
    .goods_attr{display:block;width:500px;}
    .goods_attr .attr-name{color: red;  width: 50px;;  float: left;font-size:14px;}
    .goods_attr ul { float:left;list-style:none;}
    .goods_attr li { margin-left:10px;color: #333; float: left; padding:4px 8px; text-align: center;  vertical-align: middle;  border: 1px solid #999;  text-indent: 0;  cursor: pointer  }
    .goods_attr li.sel { border: 1px solid #c80a28; color: #333;}
    .goods_attr li.b {
        border: 1px dotted #CCC;
        color: #DDD;
        pointer: none;
    }
    .number-group{width:150px;}
</style>
<script src="/public/plugins/sku/goods.js"></script>
<script>var sku_list = {$skuList};</script>
<script src="/public/plugins/sku/goods-sku.js"></script>
{/block}
{block name="body"}
{include file="tpl/site_0/default/pc/public/head.html" /}
<div class="container">
    <h1>这是内容页标签调用</h1>
    <h3>当前位置</h3>
    当前位置：
    {volist name="locationCat" id="vo"}
    <a href="{$vo.url}">{$vo.cat_name}</a>->
    {/volist}商品详情
    <h3>商品内容</h3>

    <div class="goodsForm" data-url="{:url('home/Cart/addCart')}">
        商品标题：<span class="fulltitle">{$goodsInfo.fulltitle}</span><br/>
        {eq name="goodsInfo.is_attr" value="1"}
        <h3>商品规格(其他商品信息通过setGoodsObj回调)：</h3>
        {volist name="goodsInfo.attr" id="vo"}
        <div class="goods_attr">
            <div class="attr-name">{$vo.attr_name}</div>
            <ul>
                {volist name="vo.attr_list" id="item"}
                <li class="goods_sku {in name="item" value="$goodsInfo['sku_name']"}sel{/in}" val="{$item}"><span>{$item}</span><s></s></li>
                {/volist}
            </ul>
        </div>
        <div class="clearfix"></div>
        {/volist}
        <script>
            /**
             * 规格点击回调 goodsForm 中必有.skuid/.number
             * @param goodsForm goodsForm为外层包裹商品属性得dom
             * @param obj obj为匹配得商品信息
             */
            function setGoodsObj(goodsForm,obj) {
                console.info(obj);
                goodsForm.find('.fulltitle').text(obj.fulltitle);
                goodsForm.find('.unit-price').text(obj.price);
            }
        </script>
        {/eq}
        <div class="number-group">
            购买商品：
            <input type="text" class="form-control skuid" value="{$goodsInfo.sku_id}" />
            购买数量：
            <div class="input-group">
                <span class="input-group-addon do" data-action="0" data-type="dec" data-min="{$goodsInfo.minimum}">-</span>
                <input type="text" class="form-control number" value="{$goodsInfo.minimum}" />
                <span class="input-group-addon do" data-action="1" data-type="inc" data-max="{$goodsInfo.goods_stock}">+</span>
            </div>
        </div>
        商品价格：<span class="unit-price">{$goodsInfo['simple_price']}</span>元    <br/>
        <a href="javascript:;" class="do" data-type="add" data-url="">加入购物车</a>
        <a href="javascript:;" class="do" data-type="buy" data-url="{:url('home/Cart/orderConfirm')}">立即购买</a>
        <script>
            /**
             * 购物车添加成功后调用方法
             */
            function callCart() {
                alert('成功');
            }
        </script>
    </div>
</div>
{/block}